<!-- top下拉组件 -->
<template>
  <view class="">
    <!-- 下拉框 -->
    <view class="u-m-p-50">
      <view class="u-demo-area u-flex u-row-center">
        <u-dropdown
          :close-on-click-mask="mask"
          ref="uDropdown"
          :activeColor="activeColor"
          :borderBottom="borderBottom"
          @open="handleOpen"
          @close="handleClose"
        >
          <u-dropdown-item title="发布时间">
            <view class="slot-content">
              <view class="item-box">
                <view
                  class="item"
                  :class="[item.active ? 'active' : '']"
                  @tap="tagTimeClick(index, TIME_LIST_SELECT)"
                  v-for="(item, index) of TIME_LIST_SELECT"
                  :key="index"
                >
                  {{ item.name }}
                </view>
              </view>
              <u-button type="error" @click="closeDropdown">确定</u-button>
            </view>
          </u-dropdown-item>
          <u-dropdown-item title="地区">
            <view class="slot-content">
              <C_areaCode
                @getCodeSeletList="getCodeSeletList"
                :dropDownCode="true"
              />
              <u-button
                style="margin-top: 20rpx"
                type="error"
                @click="closeDropdown"
                >确定</u-button
              >
            </view>
          </u-dropdown-item>
          <u-dropdown-item title="招标分类">
            <view class="slot-content">
              <view class="item-box">
                <view
                  class="item"
                  :class="[item.active ? 'active' : '']"
                  @tap="tagClick(item, index, tenderTypeList)"
                  v-for="(item, index) of tenderTypeList"
                  :key="index"
                >
                  {{ item.dictLabel }}
                </view>
              </view>
              <u-button type="error" @click="closeDropdown">确定</u-button>
            </view>
          </u-dropdown-item>
        </u-dropdown>
      </view>
    </view>
  </view>
</template>

<script>
import {
  AREA_CODES,
  TIME_LIST_SELECT,
  own_getDay,
  getDictList,
} from 'pages/common/Dict/index.js'
import colorGradient from '../../uview-ui/libs/function/colorGradient'

export default {
  props: {
    keyword: {
      type: String,
    },
  },

  data() {
    return {
      showContentOverflow: false,
      AREA_CODES,
      TIME_LIST_SELECT,
      tenderTypeList: [], // 招标分类字典列表
      bidTypes: [], // 选中的投标列表
      mask: true, // 是否显示遮罩层
      paramObject: {
        publishTimeStart: '',
        publishTimeEnd: '',
        provinces: '',
        types: '',
        searchContent: '',
      },

      borderBottom: false,
      activeColor: '#fff',
    }
  },

  async created() {
    // 拿得招标分类字典列表
    this.tenderTypeList = await getDictList(this, 'tender_type')
    this.disposeTenderTypeList() // 给获得的数据字典数据添加自定义属性
  },

  // 为了统一传，我将父组件的搜索值传这 一起包装到 paramObject一起传递给列表用
  watch: {
    keyword(newVal, oldVal) {
      this.paramObject.searchContent = this.keyword
      this.$emit('transmitParamObject', this.paramObject)
    },
  },

  methods: {
    handleOpen() {
      this.showContentOverflow = true
      this.$emit('oepn', this.showContentOverflow)
    },
    handleClose() {
      this.showContentOverflow = false
      this.$emit('close', this.showContentOverflow)
    },

    // 特殊处理一下招标分类的数据，添加自定义属性，确认是否选中
    disposeTenderTypeList() {
      this.tenderTypeList.forEach((item) => this.$set(item, 'active', false))
    },

    tagClick(item, index, arr) {
      console.log(item)
      arr[index].active = !arr[index].active
      let flag = this.bidTypes.some((ele) => ele.includes(item.dictValue))
      if (flag === false) this.bidTypes.push(item.dictValue)
      else {
        let idx = this.bidTypes.indexOf(item.dictValue)
        this.bidTypes.splice(idx, 1)
      }
      // 传递的数据处理一下
      this.paramObject.types = this.bidTypes.join(',')
    },

    // 拿到地区子组件传递过来的选中的地区数组
    getCodeSeletList(codeList) {
      this.paramObject.provinces = codeList.join(',')
    },
    // 关闭模态框
    closeDropdown() {
      this.$refs.uDropdown.close()
      this.$emit('transmitParamObject', this.paramObject)
    },

    // 处理时间，给时间添加默认格式
    disposeTime(time, curr) {
      return [`${time} 00:00:00`, `${time} 24:00:00`]
    },

    // 选择发布时间搜索事件
    tagTimeClick(index, arr) {
      for (let i = 0; i < arr.length; i++) {
        arr[i].active = false
        arr[index].active = true
      }

      switch (index) {
        case 0:
          this.paramObject.publishTimeStart = ''
          this.paramObject.publishTimeEnd = ''
          break
        case 1:
          this.paramObject.publishTimeStart = this.disposeTime(own_getDay(0))[0]
          this.paramObject.publishTimeEnd = this.disposeTime(own_getDay(0))[1]
          break
        case 2:
          this.paramObject.publishTimeStart = this.disposeTime(
            own_getDay(-7)
          )[0]
          this.paramObject.publishTimeEnd = this.disposeTime(own_getDay(0))[1]
          break
        case 3:
          this.paramObject.publishTimeStart = this.disposeTime(
            own_getDay(-30)
          )[0]
          this.paramObject.publishTimeEnd = this.disposeTime(own_getDay(0))[1]
          break
        case 4:
          this.paramObject.publishTimeStart = this.disposeTime('1970-01-01')[0]
          this.paramObject.publishTimeEnd = this.disposeTime(own_getDay(-30))[1]
          break
      }
    },
  },
}
</script>

<style scoped lang="scss">
.u-config-wrap {
  padding: 40rpx;
}
.slot-content {
  background-color: #ffffff;
  padding: 24rpx;

  .item-box {
    margin-bottom: 50rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      border: none;
      color: #4c4c4c;
      padding: 8rpx 40rpx;
      border-radius: 100rpx;
      margin-top: 30rpx;
      background-color: #f7f7f7;
    }
    .active {
      border: 1px solid $u-type-error;
      color: $u-type-error;
      background-color: #fff;
    }
  }
}
/deep/ .u-dropdown__menu__item__text {
  color: #fff !important;
}
/deep/ .u-icon__icon {
  color: #fff !important;
}
</style>
